<!DOCTYPE html>
<html lang="zh-cn">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<title>员工打卡</title>

	<style>
		html, body{
			height: 100%;
		}

		div#container{
			min-height: 100%;
			width:100%;
			margin-bottom: -40px;
			padding-bottom: 40px;
		}

		table,
		td,
		th {
			border: 1px solid #7942C8;
		}
		
		th {
			background-color: #7942C8;
			color: white;
		}
		.bs-example{
			position: relative;
		}
		.bs-example .pagination{
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.bs-example nav{
			text-align: center;
		}
		.pagination{
			display: inline-block;
			padding-left: 0;
			margin: 20px 0;
			border-radius: 4px;
		}
		.pagination>li {
			display: inline;
		}
		.pagination>li>a, .pagination>li>span {
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #7942C8;
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #ddd;
		}
		.pagination>li>a.disabled{
			color : #a8a8a8;
		}
		.hidden{
			display: none;
		}
	</style>
	<!--<style type="text/css">
		.linear{
background-image: linear-gradient(to top, #fff,#AD94D2);
height: 100%;
}

</style>-->

</head>


<!--<style>
	.button {
		background-color: #7942C8;
		border: none;
		color: white;
		border-radius: 10px;
		/*padding: 16px 32px;*/
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		margin: 4px 4px;
		-webkit-transition-duration: 0.4s;
		/* Safari */
		transition-duration: 0.4s;
		cursor: pointer;
	}
	
	.button1 {
		background-color: white;
		color: black;
		border: 2px solid #7942C8;
	}
	
	.button1:hover {
		background-color: #7942C8;
		color: white;
	}
</style>-->


	<body>
		<div id="container"  style="">
			<div id="header" style="height:85px;background-color:#7942C8; box-shadow: 0 2px 3px #AD94D2">
				<img src="/img/Logo2.png" height="65" width="340" style="position: absolute;	left: 9%; top: 1.6%;" alt="logo" />
				<button class="btn btn-default" style="background: transparent; margin-left: 87%; padding-top: 40px;">
					<a href="/" style="color: white;">退出</a>
				</button>
			</div>
			
			<div class="container" style="width: 60%; position: relative; float: left; left: 9%; top: 25px; bottom: 10px;">
				<div class="row">
					<div class="col-md-1"><h6 style=" padding: 8px 0 0 0;">姓名</h6></div>
					<div class="col-md-3">
						<div class="input-group">
							<input name="name" type="text" class="form-control" placeholder="请输入姓名">
						</div>
					</div>
					<!--<div class="col-md-1"></div>-->
					<div class="col-md-1"><h6 style="padding: 8px 0 0 0;">工号</h6></div>
					<div class="col-md-3">
						<div class="input-group">
							<input name="employee_id" type="text" class="form-control" placeholder="请输入工号">
						</div>
					</div>
					<div class="col-md-2">
						<span class="input-group-btn">
                    		<!--<button class="button button1" >搜索</button>-->
                    		<button class="btn btn-default" style="color: white; background-color: #7942C8; border-radius: 10px; "  onclick="searchEmployee()">查看打卡历史</button>
                		</span>
                	</div>
				</div>
			</div>
			<div>
				<button type="button" id="download" class="btn btn-default" id="btn_download"  style="background: transparent; color: #7942C8;  padding-top: 0; margin-left:87%">导出</button>
			</div>
			
			<div class="table-responsive" style="width: 82%; margin: 1% 9% 0 9% ; ">
			<table id="tb_departments" class="table table-bordered table-hover table-sm" style="text-align:center">
				<thead class="table-light">
					<tr>
						<th scope="col">序号</th>
						<th scope="col">姓名</th>
						<th scope="col">工号</th>
						<th scope="col">打卡时间</th>
						<th scope="col">打卡类型</th>
						<th scope="col">打卡历史</th>
					</tr>
				</thead>
				<tbody>
					<% for re in @records: %>
						<% d = new Date(re.createdAt) %>
						<% d = d.getFullYear().toString() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日" + "   " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()  %>
						<tr>
							<td><%- re.id %></td>
							<td><%- re.Employee.name %></td>
							<td><%- re.Employee.employee_id %></td>
							<td><%- d %></td>
							<% if re.type == 1 : %>
							<td>签到</td>
							<% else : %>
							<td>签退</td>
							<% end %>
							<td><a href="/token/crew?id=<%- re.Employee.id %>" style="color: #7942C8;">查看</a></td>
						</tr>
					<% end %>
				</tbody>
			</table>
			</div>
			<div class="bs-example" data-example-id="simple-pagination">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<% if @page - 1 < 1: %>
							<li>
								<a href="#" class="disabled">
									<span aria-hidden="true"><</span>
								</a>
							</li>
						<% else: %>
							<li>
								<a href="/token/home?page=1">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li>
								<a href="/token/home?page=<%- @page - 1 %>">
									<span aria-hidden="true"><</span>
								</a>
							</li>
						<% end %>

						<% num = Math.ceil(@count / 10) %>
						<% start = if num > 5 then @page else 1 %>
						<% c = 1 %>
						<% for i in [start..num]: %>
							<% if c > 5: %>
								<% break %>
							<% else : %>
								<li><a href="/token/home?page=<%- i %>"><%- i %></a></li>
						    <% end %>
							<% c++ %>
						<% end %>
						<% if @page + 1 > num: %>
						<li>
							<a href="#" class="disabled">
								<span aria-hidden="true">></span>
							</a>
						</li>
						<% else: %>
						<li>
							<a href="/token/home?page=<%- @page + 1 %>">
								<span aria-hidden="true">></span>
							</a>
						</li>
						<li>
							<a href="/token/home?page=<%- num %>">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
						<% end %>
					</ul>
				</nav>
			</div>


		</div>
		<div id="footer" style="height:40px; width: 100%; position:relative; bottom: 0px; background-color:#7942C8; clear:both;
				color:#FFFFFF; text-align:center; padding-top:10px; box-shadow: 0 -2px 3px #AD94D2;">copyright©2018dangdang
		</div>
		<table id="table_export"class="hidden">
			<thead class="table-light">
			<tr>
				<th scope="col">序号</th>
				<th scope="col">姓名</th>
				<th scope="col">工号</th>
				<th scope="col">打卡时间</th>
				<th scope="col">打卡类型</th>
				<th scope="col">打卡历史</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</body>
	<script src="/js/jquery-3.3.1.min.js"></script>
	<script src="/js/xls.core.min.js"></script>
	<script src="/js/FileSaver.min.js"></script>
	<script src="/js/tableExport.js"></script>
	<% d = new Date() %>
	<% d = d.getFullYear().toString() + '-' + (d.getMonth() + 1) + '-' + d.getDate()%>
	<script type="application/javascript">
        var isRequested = false;
        function exportXls(){
            if(isRequested){
                $("#table_export").tableExport({
                    headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
                    footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
                    formats: "xls",    // (String[]), filetypes for the export
                    fileName: "员工打卡记录",                    // (id, String), filename for the downloaded file
                    bootstrap: false,                   // (Boolean), style buttons using bootstrap
                    position: "bottom",                 // (top, bottom), position of the caption element relative to table
                    ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file(s)
                    ignoreCols: null,                  // (Number, Number[]), column indices to exclude from the exported file(s)
                    ignoreCSS: ".tableexport-ignore",  // (selector, selector[]), selector(s) to exclude from the exported file(s)
                    emptyCSS: ".tableexport-empty",    // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s)
                    trimWhitespace: false              // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s)
                });
            }else{
                $.get({
                    url : "/getAllRecords",
                    async : false,
                    success : function(res){
                        isRequested = true;
                        var records = res.msg;
                        var d,text;
                        for(var i = 1; i < records.length; i++){
                            d = new Date(records[i].createdAt);
                            d = d.getFullYear().toString() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日" + "   " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                            text = records[i].type === 1 ? "签到" : "签退";
                            $("<tr><td>" + records[i].id +
                                "</td><td>" + records[i].Employee.name +
                                "</td><td>" + records[i].Employee.employee_id +
                                "</td><td>" + d +
                                "</td><td>" + text +
                                "</td>" + "<td><a href=\"/token/crew\" style=\"color: #7942C8;\">查看</a></td>" +
                                "</tr>").appendTo("#table_export>tbody");
                        }
                        $("#table_export").tableExport({
                            headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
                            footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
                            formats: "xls",    // (String[]), filetypes for the export
                            fileName: "<%- d %>员工打卡记录",                    // (id, String), filename for the downloaded file
                            bootstrap: false,                   // (Boolean), style buttons using bootstrap
                            position: "bottom",                 // (top, bottom), position of the caption element relative to table
                            ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file(s)
                            ignoreCols: null,                  // (Number, Number[]), column indices to exclude from the exported file(s)
                            ignoreCSS: ".tableexport-ignore",  // (selector, selector[]), selector(s) to exclude from the exported file(s)
                            emptyCSS: ".tableexport-empty",    // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s)
                            trimWhitespace: false              // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s)
                        });
                    }
                });
            }
        }

        $("#download").click(function(){
            exportXls()
		})

        function searchEmployee(){
            var name = $("input[name='name']").val().trim();
            var employee_id = $("input[name='employee_id']").val().trim();
            if(name || employee_id){
                $.post({
                    url: "/searchEmployee",
                    data : {name : name ,employee_id : employee_id},
                    success : function(res){
                        if(res.status === 0){
                            alert("不存在此员工");
                        }else{
                            location.href = "/token/crew?id=" + res.msg.id;
                        }
                    }
                });
            }
        }

        $("input[name='name']").bind('keydown',function(event){
            if(event.keyCode == "13") {
                searchEmployee();
            }
        });

        $("input[name='employee_id']").bind('keydown',function(event){
            if(event.keyCode == "13") {
                searchEmployee();
            }
        });
	</script>
	<script type="text/plain" id="records"><%- JSON.stringify(@records) %></script>
	<script type="text/plain" id="count"><%- @count %></script>
	<script type="text/plain" id="page"><%- @page %></script>
	<script type="application/javascript">
        // var records = JSON.parse(document.getElementById("records").innerText);
        // console.log(records);
	</script>

</html>